<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path=request.getContextPath()+"/";%>
<!DOCTYPE html>
<html lang="en">

<head>
    <base href="<%=path %>" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--添加bootstrap的核心css和js-->
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <!--添加jquery的依赖   注意jquery的依赖要加到bootstrap的前面才能生效-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>


    <!--bootstrap table 的-->
    <link href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.2/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <style>
        body {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
<div class="container" style="background-color:#f3f3f4;width: 100%;">
    <!--上部分-->
    <div class="row a " style="margin-left: 0px;margin-right: 0px;">

        <div class="col-md-12" style="padding:0px;">
            <div style="height:668px; ">
                <div class="row " style="background-color:#fff;  margin: 10px 10px ;padding: 10px 0;border-radius: 10px">
                    <div class=" col-md-12">
                        <form class="form-inline" id="form1">
                            <div class="form-group" style="padding-right:8px;">
                                <label for="exampleInputName2">部门名称</label>
                                <input type="text" name="deptName" class="form-control" id="exampleInputName2" placeholder="输入登录名">
                            </div>

                            <div class="form-group" style="padding-right:8px;">
                                <label >部门状态</label>
                                <select class="form-control" style="width: 200px" name="flag">
                                    <option value="">所有</option>
                                    <option value="1">启用</option>
                                    <option value="2">停用</option>

                                </select>
                            </div>

                            <div class="form-group" style="padding:8px 0px; margin-left: 10px">
                                <!--定义与作用: for属性规定label与哪个表单元素绑定-->

                                <button type="button" onclick="$.table.refresh();" class="btn btn-success" style="padding-left:8px; border-radius: 20px;"><span class="glyphicon glyphicon-search"></span>搜索</button>
                                <button type="reset" class="btn btn-warning" style="padding-left:8px; border-radius: 20px;"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                            </div>

                        </form>

                    </div>
                </div>
                <div class="row " style="background-color:#fff;  margin: 10px 10px ;padding: 10px 0;border-radius: 10px">
                    <div class="col-md-12">
                        <!--bootstrap table的插件-->
                        <table id="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="toolbar">
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success btn-sm" onclick="$.operate.addorupdate('/dept/toEdit/','新增部门信息')"><span class="glyphicon glyphicon-plus"></span> 新增</button>

        <button type="button" class="btn btn-info btn-sm" onclick="update()"><span class="glyphicon glyphicon-edit" ></span> 修改</button>

        <button type="button" onclick="deletes()" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-trash"></span> 删除</button>

        <button type="button" onclick="togell()" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-print"></span> 展开/折叠</button>

    </div>
</div>
</body>
<script src="js/bootstrap/rbac.js"
<script src="js/layer/layer.js"></script>

<style>
    .head {
        background-color: #5e5e5e;
    }
</style>
<script>
    var i=0;
    function togell(){
       i++;
       if(i%2==1){
           $("#table").treegrid("collapseAll");
       }else{
           $("#table").treegrid("expandAll");
       }

    }
    var options={
        url:'dept',
        columns:  [{
            title: '复选框',
            checkbox: true,
        },
            { //数组 声明表的列名和对应的属性名
                field: 'deptName', //列字段名称
                title: '部门名称', //列标题文本
                titleTooltip: "这是部门名称", //鼠标悬浮提示文字
                sortable: true //设置 true为允许列可以排序。 有了上下箭头
            }, {
                field: 'parentId',
                title: '排序'
            }, {
                title: '状态',
                field:'flag',
                formatter:function (value) {  //格式化某一列的数据
                    if(value==1){
                        return '<span class="badge badge-primary" style="background-color: #1ab394;">正常</span>'
                    }
                    return '<span class="badge badge-primary" style="background-color: #1ab394;">停用</span>'
                }

            }, {
                // field: 'createDate',
                title: '创建时间',
                width: 200, //列的宽度
                widthUnit: 'px' //用于定义width宽度的单位   默认是px
            }, {
                align: 'center',
                title: '操作',
                formatter: function(value, row, index, filed) {
                    return '<a href="javascript:void(0)" title="修改" onclick="$.operate.addorupdate(\'dept/toEdit?id=' + row.id + '\',\'编辑用户信息\')" ><span class="glyphicon glyphicon-edit"></span></a>&nbsp<a title="删除" onclick="$.operate.delete(\'/dept/delete/' + row.id + '\')"><span  class="glyphicon glyphicon-trash"></span></a>'
                }
            }
        ],
        treeShowField: 'deptName',
        parentIdField: 'parentId',
        rootParentId:'0'
    };
    $.tableTree.init("table",options);

</script>

</html>